{literal}
<style>

a.active {
    text-decoration: none;
    font-weight: bold;
    color: #A70303;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
	activeMenu('2', '9');
	$('#quickSearch').unbind();
	$('#quickSearch').keypress(function(e) {
		if (e.which == 13){
			e.stopPropagation();
			fastSearchPatient('Patient', 'ViewMedicalRecord' , 'doctorWorkspacePageContent', 0, true);	
		}
	});

	$('#patientList tr:last').addClass('last');

    $('a.link').click(function() {
    	$('a.link').removeClass('active');    
        $(this).addClass('active');
    });		
});

function viewMedicalRecord(patientId) {
	$.ajax({
		type:	'GET',
		url:	'../Patient/ViewMedicalRecord?set_ajax_view',
		data: 	'patientId=' + patientId,
		dataType:	'html',
		success:	function(data) {
			$('#doctorWorkspacePageContent').html(data);
		}
	});
}

function listPatient(type) {
    
    $.ajax({
        type:   'GET',
        url:    '../Doctor/GetPatientList?set_ajax_view',
        data:   'timeRange=' + type,
        dataType:   'html',
        beforeSend: function() {toggleModalAjaxLoader();},
        complete: function() {toggleModalAjaxLoader();},
        success:    function(data) {
            $('#patientList tbody').html(data);
        }
    });
}
</script>
{/literal}

<div id='doctorWorkspacePageContent'>
	<div style='float: left; margin-top: 10px;'>
		<span style='padding-bottom: 3px; border-bottom: 1px dotted #AAA;'><i>{translate}Patient list{/translate}</i></span>
        <span style="text-align: right; font-weight: bold; font-size: 11px; float: right;">        
            <a class="link active" href="javascript:listPatient('day');">Trong ngày</a> &nbsp;
            <a class="link" href="javascript:listPatient('week');">Tuần</a> &nbsp;
            <a class="link" href="javascript:listPatient('2week');">2 Tuần</a> &nbsp;
            <a class="link" href="javascript:listPatient('month');">Tháng</a> &nbsp;
        </span>
		<table id='patientList' class='grid' cellspacing='0' cellpadding='0' style='-moz-box-shadow: 0 0 3px #AAA; margin-top: 15px;'>
			<!--caption></caption-->
			<thead>
				<tr>
					<th style='width: 30px;'>{translate}No.{/translate}</th>
					<th style='width: 180px;'>{translate}Name{/translate}</th>
					<th style='width: 90px;'>{translate}Patient's ID{/translate}</th>
					<th style='width: 120px;'>{translate}DOB/Age{/translate}</th>
					<th style='width: 90px;'>{translate}Gender{/translate}</th>
					<th style='width: 90px;'>&nbsp;</th>
				</tr>
			</thead>
			<tbody>
			{if empty($patientList)}
				<tr>
					<td colspan='6'>{translate}There's no patient today{/translate}</td>
				</tr>
			{else}
				{foreach from=$patientList item=patient}
				<tr>
					<td>{$index++}</td>
					<td style="font-weight: bold;"><a href="javascript:viewMedicalRecord({$patient.person_id});">{$patient.name}</a></td>
					<td>{$patient.patient_code}</td>
					<td>{$patient.birth_year} ({$patient.age})</td>
					<td>{if $patient.gender == male}{translate}Male{/translate}{else}{translate}Female{/translate}{/if}</td>
					<td>
                        {$patient.created}                         
                    </td>
				</tr>
				{/foreach}
			{/if}
			</tbody>
		</table>
	</div>
	<div style='float: right; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #EEE; border: 1px solid #DDD; width: 300px; margin-top: 38px;'>
		<div class='doctor-intro'>
			{translate}Select patient from the list or enter patient's ID into search box to view/update profile{/translate}
		</div>
	</div>
	<div style='clear: both;'></div>
</div>
